<template>
  <vue-editor
    class="editor"
    v-model="dataInfo.content"
    use-custom-image-handler
    :disabled="disabled"
    :editor-toolbar="customToolbar"
    :editorOptions="editorSettings"
    @image-added="handleImageAdded" />
</template>

<script>
import { VueEditor, Quill } from "vue2-editor"
import ImageResize from "quill-image-resize-module"
Quill.register("modules/imageResize", ImageResize)
export default {
  components: { VueEditor },
  props: {
    value: [String, Number],
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dataInfo: {
        content: null,
        imgList: []
      },
      editorSettings: {
        modules: {
          // imageDrop: true,
          imageResize: {
            // 控制图片编辑的，实现功能就是这一段代码
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white"
            },
            modules: ["Resize", "DisplaySize"]
          }
        }
      },
      customToolbar: [
        [{ header: [false, 1, 2, 3, 4, 5, 6] }],
        ["bold", "italic", "underline", "strike"],
        [{ align: ["", "center", "right", "justify"] }],
        ["blockquote"],
        [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
        [{ script: "sub" }, { script: "super" }],
        [{ indent: "-1" }, { indent: "+1" }],
        [{ color: [] }, { background: [] }],
        ["image"],
        ["clean"]
      ],
      uploadData: {
        accessKeyId: "",
        policy: "",
        signature: "",
        key: "",
      }
    }
  },
  watch: {
    value(n) {
      console.log("value", n)
      this.dataInfo.content = n
    },
    "dataInfo.content"(n) {
      console.log("富文本内部改变", n, this)
      this.$emit("input", n)
    },
    "dataInfo.imgList"(n) {
      console.log("imgList", n, this)
      this.$emit("updateImg", n)
    }
  },
  mounted() {
  },
  methods: {
    async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      console.log(file, Editor, cursorLocation, resetUploader, 'handleImageAdded')
      // Editor.insertEmbed(cursorLocation, "image", url)
      // resetUploader();
    }
  }
}
</script>

<style lang="scss">
.editor {
  display: inline-block;
  width: 100%;
}

::v-deep .ql-video {
  display: none !important;
}
</style>
